/**
 * Created by tutu on 16-1-4.
 */

/// <reference path="../../../../typings/react/react.d.ts" />
/// <reference path="../../../../libs/ts/redux-dev-tools.d.ts" />
/// <reference path="../../../../libs/ts/redux-devtools-log-monitor.d.ts" />
/// <reference path="../../../../libs/ts/redux-devtools-dock-monitor.d.ts" />

import * as React from "react";

// Exported from redux-devtools
import { createDevTools } from "redux-devtools";

// Monitors are separate packages, and you can make a custom one
import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';

// createDevTools takes a monitor and produces a DevTools component
const DevTools = createDevTools(
  // Monitors are individually adjustable with props.
  // Consult their repositories to learn about those props.
  // Here, we put LogMonitor inside a DockMonitor.
    <DockMonitor toggleVisibilityKey= "ctrl-h"
               changePositionKey= "ctrl-q">
    <LogMonitor theme= "tomorrow" />
  </DockMonitor>
);

export default DevTools;
